<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.0.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	var idflag=false;
	var nicknameflag=false;
	var passwordflag=false;
	
	$("#register").click(function(){
		var regx = /^[a-zA-Z0-9]*$/;
		var format  = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/;
		if($("#id").val()==""){
			alert("아이디를 입력하세요!");
			return false;
		}if(idflag==false){
    	 	$(":input[name=id]").val("");  //input 일때는 value 로 해줘야 함.
			$(":input[name=id]").focus();
    	// 	alert($("#id").val());
    	// 	alert("안되");
    	 	return false;
       }else if(($("#id").val()).length <4 || ($("#id").val()).length >12){
    	   $(":input[name=id]").val("");  
			$(":input[name=id]").focus();
			return false;
       }
    	   else if(!regx.test($("#id").val())){
			alert("아이디는 영어, 숫자만 입력 가능합니다");
			$(":input[name=id]").val("");  
			$(":input[name=id]").focus();
			return false;
		}else if($("#nickname").val()==""){
			alert("닉네임을 입력하세요!");
			return false;
		}else if(($("#nickname").val()).length <2 || ($("#nickname").val()).length >10){
		 //	alert("2자리 이상 10자리 이하");
		 	$(":input[name=nickname]").val(""); 
			$(":input[name=nickname]").focus();
		 	return false;
		}
		else if(nicknameflag==false){
    		$("#nickname").val("");
			$("#nickname").focus();
			return false;
       }else if($("#password").val()==""){
			alert("패스워드를 입력하세요!");
			return false;
		}else if(passwordflag==false){
	    	   $("#passwordConfirm").val("");
	    	   $("#passwordConfirm").focus();
	    	   return false;
	    }else if($("#password").val()==""){
			alert("패스워드를 확인해주세요!");
			return false;
		}else if($("#email").val()==""){
			alert("e-mail 을 입력하세요!");
			return false;
		} else if($("#email").val().search(format) == -1){
			alert("이메일 형식에 맞게 입력해 주세요");
			$("#email").focus();
			return false;
		}	

	}); // click
		$("#id").keyup(function(){
			var id=$("#id").val();
			if(id.length<4 || id.length>12){
				$("#idCheckView").html("<b><font color='pink'>[4자리이상 12자리이하]</font></b>");
				return;
			} //if
			$.ajax({
				type:"POST",
				url:"checkId.ju",
				data:"id="+id,
				success:function(data){
		//			alert(data.flag);
					if(data.flag!=false){
						$("#idCheckView").html("<b><font color='red'>"+id+" 사용불가</font></b>");
						//$("#id").val("");  //input 일때는 value 로 해줘야 함.
					//	$("#id").focus();
						idflag=false;
						return false;
					}else{
						$("#idCheckView").html("<b><font color='violet'>"+id+" 사용가능합니다</font></b>");
						idflag=true;
					}
					status=data.flag;
				} //success
			}); //ajax
		}); //keyup
		
	
		$("#nickname").keyup(function(){
			var nickname=$("#nickname").val();
			if(nickname.length<2 || nickname.length>10){
				$("#nicknameCheckView").html("<b><font color='pink'>[2자리이상 10자리이하]</font></b>");
				return;
			} //if
			$.ajax({
				type:"POST",
				url:"checkNickname.ju",
				data:"nickname="+nickname,
				success:function(data){
		//			alert(data.flag);
					if(data.flag!=false){
						$("#nicknameCheckView").html("<b><font color='red'>"+nickname+" 사용불가</font></b>");
					//	$("#nickname").val("");
					//	$("#nickname").focus();
						nicknameflag=false;
					}else{
						$("#nicknameCheckView").html("<b><font color='violet'>"+nickname+" 사용가능합니다</font></b>");
						nicknameflag=true;
					}
					status=data.flag;
				} //success
			}); //ajax
		}); //keyup
		  //[1] passwordCheckView 레이어 클리어
        $('#password').keyup(function() {
            //$('#passwordCheckView').remove(); // 제거
            $('#passwordCheckView').text(''); // 클리어
        });

        //[2] 암호 확인 기능 구현
        $('#passwordConfirm').keyup(function() {
            if ($('#password').val() != $('#passwordConfirm').val()) {
                $('#passwordCheckView').text(''); // 클리어
                $('#passwordCheckView').html("<b><font color='red'>암호가 틀립니다</font></b>"); // 레이어에 HTML 출력
         //       $("#passwordConfirm").focus();
                passwordflag=false;
                return false;
            }
            else {
                $('#passwordCheckView').text(''); // 클리어
                $('#passwordCheckView').html("<b><font color='violet'>암호가 맞습니다</font></b>"); // 레이어에 텍스트 출력
                passwordflag=true;
            }
        });
     
        
        $("#file").change(function(){
        	  var file = $(this).prop("files")[0],
              reader = new FileReader();
		          reader.onload = function (event) {
		            var img = new Image();
		            img.src = event.target.result;
		            if (img.width > 150) { 
		              img.width = 150;
		            }
		            $("#thumbnailView").html("").append(img);
		          };
          reader.readAsDataURL(file);
          return false;
        });  //change
        
       $("#cancelBtn").click(function(){
    	   location.href="gohome.ju";
       }); // click
       
      
}); //ready
</script>

</head>
<body>

<form class="form-horizontal"  action="${initParam.root}registerMember.ju" method="post" id="registerForm" enctype="multipart/form-data">
  <fieldset>
    <legend>회원가입</legend>
        <div class="form-group">
	  <label class="col-lg-2 control-label">프로필 사진</label>
	  <div class="col-lg-8">
	  <div class="border-lavener" id="thumbnailView"><img src="${initParam.memberPhotoPath}/default.jpg" width="150">
		</div><br>
	    <input type="file" class="form-control" id="file" name="file" accept="image/*">
	  </div>
	</div>

      <div class="form-group">
      <label for="inputId" class="col-lg-2 control-label">ID</label>
      <div class="col-lg-8">
      <div id="idCheckView"></div>
        <input type="text" class="form-control" id="id" name="id" placeholder="id">
      </div>
    </div>
    
    <div class="form-group">
      <label for="inputNickname" class="col-lg-2 control-label">닉네임</label>
      <div class="col-lg-8">
      <div id="nicknameCheckView"></div>
        <input type="text" class="form-control" id="nickname" name="nickname" placeholder="nickname">
      </div>
    </div>
      <div class="form-group">
      <label for="inputPassword" class="col-lg-2 control-label">비밀번호</label>
      <div class="col-lg-8">
        <input type="password" class="form-control" id="password"  name="password" placeholder="password">
      </div>
    </div>
         <div class="form-group">
      <label for="inputPasswordConfirm" class="col-lg-2 control-label">비밀번호확인</label>
      <div class="col-lg-8">
      <div id="passwordCheckView"></div>
        <input type="password" class="form-control" id="passwordConfirm" name="passwordConfirm" placeholder="password Confirm">
      </div>
    </div>
         <div class="form-group">
      <label for="inputEmail" class="col-lg-2 control-label">Email</label>
      <div class="col-lg-8">
        <input type="text" class="form-control" id="email" name="email" placeholder="Email">
      </div>
    </div>
  
    <div class="form-group">
      <div class="col-lg-10 col-lg-offset-2">
      <button class="btn btn-default" id="cancelBtn">취소</button>
      <button type="submit" class="btn btn-primary" id="register">회원가입</button>
      </div>
    </div>
  </fieldset>
</form>
</body>
</html>